<template>
  <div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="recommend-list"
       v-for="item in recdata"
      :key="item.id"
       @click="detail(item)"
     
      >
        <div class="Dtop">
          <img

            :src="item.avatar"
            alt=""
             v-lazy="item.avatar"
          />
          <div class="Dtop_left">
            <p>{{item.name}}</p>
            <p style="color: #888888">
              <span>{{item.position}}</span>&nbsp;<span>4421人看过</span>
            </p>
          </div>
        </div>
        <div class="Dmain" v-show="item.type === '视频'">
          <div class="type1">
            <span class="type" style="background-color: #a0a8f8;" >{{ item.type }}</span>
            <span class="typebotom">{{item.title}}</span>
          </div>
          <div class="video">
            <img class="video" v-lazy="item.content[0].image" alt="">
          </div>
          <van-text-ellipsis
            rows="1"
            :content="item.desc"
          />
        </div>
 <div class="Dmain" v-show="item.type === '问答'">
          <div class="type1">
            <span class="type" style="background-color: #38d1af;" >{{ item.type }}</span>
            <span class="typebotom">{{item.title}}</span>
          </div>
          <van-text-ellipsis
            rows="1"
            :content="item.desc"
          />
        </div>
        <div class="Dmain" v-show="item.type === '音频'">
          <div class="type1">
            <span class="type" style="background-color: #7ed6ee;" >{{ item.type }}</span>
            <span class="typebotom">{{item.title}}</span>
          </div>
          <div class="audio">
            <div >
              <img class="audio1" v-lazy="item.content[0].mp3" alt="">
            </div>
         
          </div>
           <van-text-ellipsis
            rows="1"
            :content="item.desc"
          />
        </div>
        <div class="Dmain" v-show="item.type === '文章'">
          <div class="type1">
            <span class="type" style="background-color: #43d3b4;" >{{ item.type }}</span>
            <span class="typebotom">{{item.title}}</span>
          </div>
          <van-text-ellipsis
            rows="1"
            :content="item.desc"
          />
        </div>
      </div>
    </van-list>
  </div>
</template>
<script lang="ts" setup>
// css样式
import "./list.css";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
const type = ref("视频");
const pageSize = ref(10)
const pageCode = ref(0)
// 推荐列表所有数据
const recommendList = ref([]);
// 推荐列表渲染数据
const recdata = ref([])

const router = useRouter();

// 获取列表数据
import axios from "axios";
const getlist = async () => {
  const res = await axios.get("/api/DownDoctorList");
  recommendList.value = res.data.data;
  recdata.value = recommendList.value.splice(pageCode.value,pageSize.value)
  
};
getlist();

// 上啦加载更多
  const loading = ref(false);
    const finished = ref(false);
     const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        pageCode.value+1
        recdata.value = [...recdata.value,...recommendList.value.splice(pageCode.value,pageSize.value)]
        
        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (recdata.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };
    // 点击列表跳转详情
    const detail = (item) => {
      const val = encodeURIComponent(JSON.stringify(item))
  router.push(`/recdetail?item=`+val);
      
};
</script>
